function zc() {
    var box = document.querySelector('.box')
    var ol = document.querySelector('.box ol')
    var ulis = document.querySelectorAll('.box ul li')
    var olis = document.querySelectorAll('.box ol li')
    // console.log(box,ulis,olis);
    for (let i = 0; i < ulis.length - 1; i++) {
        ulis[i].onmouseover = function () {
            for (let j = 0; j < ulis.length - 1; j++) {
                ulis[j].className = ''
                olis[j].className = ''
                ol.className = ''
            }
            getStyle(box, 'height')
            // console.dir(box);
            ulis[i].className = 'active'
            olis[i].className = 'active'
            ol.className = 'active'
        }
        box.onmouseout = function () {
            ulis[i].className = ''
            olis[i].className = ''
            ol.className = ''
        }
    }

    // var form = document.querySelector('form')
    var button = document.querySelector('[type="button"]');
    var username = document.querySelector('[name="username"]')
    var password = document.querySelector('[name="password"]');
    var repassword = document.querySelector('[name="repassword"]')
    var nickname = document.querySelector('[name="nickname"]')
    var celephone = document.querySelector('[name="celephone"]')
    var email = document.querySelector('[name="email"]')

    // 文本框获得焦点
    username.onfocus = function () {
        if (!this.parentElement.nextElementSibling) {
            var td = document.createElement('td')
            this.parentElement.parentElement.appendChild(td)
        }
        this.parentElement.nextElementSibling.innerText = '用户名的规则是：字母开头，字母数字组成，3~10位';
        this.parentElement.nextElementSibling.style.fontSize = '12px'
        this.parentElement.nextElementSibling.style.color = '#666';
    }
    username.oninput = function () {
        var reg = /^[a-zA-Z][a-zA-Z0-9]{2,9}$/
        if (reg.test(this.value)) {
            this.parentElement.nextElementSibling.innerText = '√通过';
            this.parentElement.nextElementSibling.style.color = '#0f0';
        } else {
            this.parentElement.nextElementSibling.innerText = '×不通过';
            this.parentElement.nextElementSibling.style.color = '#f00';
        }
    }
    password.onfocus = function () {
        if (!this.parentElement.nextElementSibling) {
            var td = document.createElement('td')
            this.parentElement.parentElement.appendChild(td)
        }
        this.parentElement.nextElementSibling.innerText = '必须同时包含大写、小写、数字，且由字母和数字组成，6~12位';
        this.parentElement.nextElementSibling.style.fontSize = '12px'
        this.parentElement.nextElementSibling.style.color = '#666';
    }
    password.oninput = function () {
        var reg1 = /^[a-zA-Z0-9]{6,12}$/
        var reg2 = /[A-Z]/
        var reg3 = /[a-z]/
        var reg4 = /\d/
        if (!reg1.test(password.value) || !reg2.test(password.value) || !reg3.test(password.value) || !reg4.test(password.value)) {
            this.parentElement.nextElementSibling.innerText = '×不通过';
            this.parentElement.nextElementSibling.style.color = '#f00';
        } else {
            this.parentElement.nextElementSibling.innerText = '√通过';
            this.parentElement.nextElementSibling.style.color = '#0f0';
        }
    }
    repassword.onfocus = function () {
        if (!this.parentElement.nextElementSibling) {
            var td = document.createElement('td')
            this.parentElement.parentElement.appendChild(td)
        }
        this.parentElement.nextElementSibling.innerText = '必须跟密码保持一致';
        this.parentElement.nextElementSibling.style.fontSize = '12px'
        this.parentElement.nextElementSibling.style.color = '#666';
    }
    repassword.oninput = function () {
        if (repassword.value != password.value) {
            this.parentElement.nextElementSibling.innerText = '×不通过';
            this.parentElement.nextElementSibling.style.color = '#f00';
        } else {
            this.parentElement.nextElementSibling.innerText = '√通过';
            this.parentElement.nextElementSibling.style.color = '#0f0';
        }
    }
    celephone.onfocus = function () {
        if (!this.parentElement.nextElementSibling) {
            var td = document.createElement('td')
            this.parentElement.parentElement.appendChild(td)
        }
        this.parentElement.nextElementSibling.innerText = '请输入真实手机号';
        this.parentElement.nextElementSibling.style.fontSize = '12px'
        this.parentElement.nextElementSibling.style.color = '#666';
    }
    celephone.oninput = function () {
        var reg = /^1[3-9]\d{9}$/
        if (!reg.test(celephone.value)) {
            this.parentElement.nextElementSibling.innerText = '×不通过';
            this.parentElement.nextElementSibling.style.color = '#f00';
        } else {
            this.parentElement.nextElementSibling.innerText = '√通过';
            this.parentElement.nextElementSibling.style.color = '#0f0';
        }
    }
    email.onfocus = function () {
        if (!this.parentElement.nextElementSibling) {
            var td = document.createElement('td')
            this.parentElement.parentElement.appendChild(td)
        }
        this.parentElement.nextElementSibling.innerText = '请输入真实邮箱号';
        this.parentElement.nextElementSibling.style.fontSize = '12px'
        this.parentElement.nextElementSibling.style.color = '#666';
    }
    email.oninput = function () {
        var reg = /(^[1-9]\d{4,9}@qq\.com$)|^[a-zA-Z]\w{5,17}@((163|126)\.com|yeah\.net)$/
        if (!reg.test(email.value)) {
            this.parentElement.nextElementSibling.innerText = '×不通过';
            this.parentElement.nextElementSibling.style.color = '#f00';
        } else {
            this.parentElement.nextElementSibling.innerText = '√通过';
            this.parentElement.nextElementSibling.style.color = '#0f0';
        }
    }

    // 点击事件
    button.onclick = function () {
        var usernameInput = document.querySelector('[name="username"]').value
        var passwordInput = document.querySelector('[name="password"]').value;
        var repasswordInput = document.querySelector('[name="repassword"]').value
        var nicknameInput = document.querySelector('[name="nickname"]').value
        var celephoneInput = document.querySelector('[name="celephone"]').value
        var emailInput = document.querySelector('[name="email"]').value
        // 验证
        var reg = /^[a-zA-Z][a-zA-Z0-9]{2,9}$/
        if (!reg.test(usernameInput)) {
            alert("用户名不符合规范")
            return false;
        }
        var reg1 = /^[a-zA-Z0-9]{6,12}$/
        var reg2 = /[A-Z]/
        var reg3 = /[a-z]/
        var reg4 = /\d/
        if (!reg1.test(passwordInput) || !reg2.test(passwordInput) || !reg3.test(passwordInput) || !reg4.test(passwordInput)) {
            alert('密码不符合规范')
            return false;
        }
        if (repasswordInput != passwordInput) {
            alert('密码错误')
            return false;
        }
        var reg = /^1[3-9]\d{9}$/
        if (!reg.test(celephoneInput)) {
            alert('手机号不符合规范')
            return false;
        }
        var reg = /(^[1-9]\d{4,9}@qq\.com$)|^[a-zA-Z]\w{5,17}@((163|126)\.com|yeah\.net)$/
        if (!reg.test(emailInput)) {
            alert('邮箱不符合规范')
            return false;
        }
        var xhr = new XMLHttpRequest;
        xhr.open('post', 'http://localhost:8888/users/register')
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
        xhr.send(`username=${usernameInput}&password=${passwordInput}&rpassword=${repasswordInput}&nickname=${nicknameInput}&celephone=${celephoneInput}&email=${emailInput}`)
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    var res = xhr.responseText;
                    console.log(res);
                    res = JSON.parse(res)
                    console.log(res);
                    var { code, message } = res
                    alert(message)
                    console.log(code, message);
                    if (code === 1){
                        location.href = "login.html"
                }
            }
        }
    }

}



}

